<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:200px;
            height:200px;
            border:5px solid yellow;
            padding:10px;
            margin:20px;
            background: red;
        }

        #text{
            height:500px;
        }


    </style>
</head>
<body>
    <div class="box"></div>
    <div id="text">我是文本</div>
    <div id="text">我是文本</div>
    <div id="text">我是文本</div>
    <div id="text">我是文本</div>
    <div id="text">我是文本</div>

    <script>
        var box = document.getElementsByClassName("box")[0];
        console.log(box.clientWidth);
        console.log(box.clientHeight);
        //获取视口高度（屏幕高度）
        console.log(document.documentElement.clientHeight);
        //获取页面高度（内容高度）
        console.log(document.body.clientHeight);

        //获取页面滚动高度
        console.log(document.documentElement.scrollTop);
        

        

    </script>
</body>
</html>